<template>
	<div>


		<el-row :gutter="10">
			<el-col :span="5">
				<el-input v-model="search.Username" placeholder="请输入查找的姓名"></el-input>
			</el-col>
			<el-col :span="19">
				<el-button type="primary" icon="el-icon-search" plain @click="searchData()">搜索</el-button>


			</el-col>
		</el-row>
		<el-table :data="result.tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column label="序号" prop="id">

			</el-table-column>


			</el-table-column>
			<el-table-column label="客户姓名" prop="username">
				<!-- </el-table-column>
		 	  <el-table-column
		 	    label="性别"
		 	    prop="gender"
		 	  >
		 	  </el-table-column>
		 	<el-table-column
		 	  label="年龄"
		 	  prop="age"
		 	> -->
			</el-table-column>
			<el-table-column label="外出事由" prop="goingOutReason">
			</el-table-column>
			<el-table-column label="外出时间" prop="goingOutTime">
			</el-table-column>

			<el-table-column label="预计回院时间" prop="estimatedTime">
			</el-table-column>
			<el-table-column label="实际回院时间" prop="actualTime"></el-table-column>
			<el-table-column label="陪同人" prop="chaperone"></el-table-column>
			<el-table-column label="与老人关系" prop="relationship"></el-table-column>
			<el-table-column label="陪同人电话" prop="chaperonePhone"></el-table-column>
			<el-table-column label="审批状态" prop="status"></el-table-column>
			<el-table-column label="审批人" prop="approver"></el-table-column>
			<el-table-column label="审批时间" prop="approvalTime"></el-table-column>
			<el-table-column label="备注" prop="notes"></el-table-column>
			<el-table-column label="操作" width="320px">

				<template slot-scope="scope">
					<template>
						<el-button type="success" size="mini" @click="edit(scope.row.id)">审批</el-button>

						<el-button size="mini" type="warning" @click="sign(scope.row.id)">登记回院时间</el-button>

					</template>
				</template>
			</el-table-column>


		</el-table>
		<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="700px">
			<GoingOutEdit v-if="show" :show.sync="show" @getData="getData()" :editid="editid">
			</GoingOutEdit>
		</el-dialog>

		<el-dialog title="登记回院时间" :visible.sync="show1" :close-on-click-modal="false" width="500px">
			<GoingOutSign v-if="show1" :show1.sync="show1" @getData="getData()" :editid="editid" :key="showNum">
			</GoingOutSign>
		</el-dialog>

		<el-pagination style="margin-top:20px;" background layout="prev, pager, next" :page-count="result.pages"
			:current-page.sync="query.pageNo" :page-size="query.pageSize" @current-change="getData()">
		</el-pagination>


	</div>
</template>

<script>
	import GoingOutEdit from '@/views/approve/edit'
	import GoingOutSign from '@/views/approve/sign'
	export default {
		name: 'approve',
		components: {
			GoingOutEdit,
			GoingOutSign,
		},
		data() {
			return {
				showNum: 0,
				editid: null,
				search: {
					Username: ''
				},
				query: {
					Username: '',
					pageNo: 1,
					pageSize: 8
				},
				result: {
					tableData: [],
					pages: 0
				},
				show: false,
				show1: false,
				selectedrow: [],
				title: ''
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				this.axios.get('/goingOut/list', response => {
					this.result.tableData = response.obj.records
					this.result.pages = response.obj.pages
					console.log(this.result.tableData)
				}, this.query)
			},
			searchData() {
				this.query.Username = this.search.Username
				this.query.pageNo = 1
				this.getData()
			},
			approve() {

				this.$router.replace('/approve')
			},
			edit(id) {
				this.title = '审批'
				this.editid = id
				this.showNum++;
				this.show = true
			},
			sign(id) {
				this.editid = id;
				this.showNum++;
				this.show1 = true;
			},

			handleSelectionChange(val) {
				// val参数为所有选中行的数据
				this.selectedrow = val
			},
			batchdel() {
				if (this.selectedrow.length === 0) {
					this.$message('没有任何被选中的数据');
				} else {
					const ids = []
					for (let i = 0; i < this.selectedrow.length; i++) {
						ids.push(this.selectedrow[i].id)
					}
					this.axios.del('/ums-user/batchdel', response => {
						this.getData()
					}, {
						ids: ids
					})
				}
			},
		}
	}
</script>
<style scoped>
	/* el-table el-table-column{
		text-align: center;
	} */
</style>
le>
